<!doctype html>
<html>

<head>
  <meta name="2PassWord" content="" charset="utf-8">
  <title>2PassWord Popup</title>
  <link rel="stylesheet" href="css/popupfilltab.css">
  <link rel="stylesheet" href="css/buttons.css">
  <style>
    body {
      opacity: 0;
      transition: 0.5s opacity;
    }
    
    #contentdiv {
      width: 360px;
      border: none;
    }
    
    #headerdiv {
      background-color: #F4F4F4;
      height: 76px;
    }
    
    #search {
      width: 283px;
      height: 26px;
      margin-left: 21px;
      margin-top: 21px;
      background-image: url(./images/Search.png);
      background-repeat: no-repeat;
      background-position: 10px center;
      background-size: 16px;
      padding-left: 30px;
    }
    
    #headerback {
      display: none;
      padding-left: 30px;
      padding-right: 20px;
      line-height: 49px;
      height: 49px;
      background-image: url(images/Back.png);
      background-position: 20px center;
      background-repeat: no-repeat;
      font-size: 13px;
      cursor: pointer;
      background-color: #F4F4F4;
    }
    
    #headerback:hover {
      background-color: #E2E2E2;
    }
    
    #backLabel {
      display: inline-block;
      float: left;
      min-width: 70px;
      font-size: 14px;
    }
    
    #groupLabel {
      padding-left: 10px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      opacity: .5;
      box-sizing: border-box;
      text-align: right;
    }
    
    input {
      outline: none;
    }
    
    #popupcontainer {
      padding-bottom: 30px;
      height: 246px;
      width: 100%;
    }
    
    .cellrow {
      list-style: none;
      display: table;
      width: 100%;
      opacity: 0.5;
    }
    
    .cellrow:hover {
      background-color: #F0F0F0;
    }
    
    .cellrow.active {
      opacity: 1;
      cursor: pointer;
    }
    
    .cellrow:hover {
      opacity: 1;
    }
    
    .cellimg {
      background-size: 16px 16px;
      background-repeat: no-repeat;
      background-position: center center;
      padding: 2px 10px;
      width: 33px;
      display: table-cell;
      background-image: url("");
    }
    
    .cellstr {
      width: 100%;
    }
    
    .cellstr p {
      margin: 10px 0;
      line-height: 13px;
      font-size: 13px;
      font-weight: normal;
    }
    
    .active .cellstr .cellname {
      font-weight: bold;
    }
    
    .cellconfig {
      width: 20px;
      height: 30px;
      cursor: pointer;
      display: table-cell;
      background-size: 16px 16px;
      background-repeat: no-repeat;
      background-position: center center;
      background-image: url("");
    }
    
    .cellconfig:hover ,.cellbutton_user:hover ,.cellbutton_password:hover{
      background-color: #E2E2E2;
    }
	    
    .cellbutton_user {
      width: 40px;
      height: 30px;
      cursor: pointer;
      display: table-cell;
      background-size: 16px 16px;
      background-repeat: no-repeat;
      background-position: center center;
	  text-align:center;
	  vertical-align:middle;
      background-image: url("");
    }
	    
    .cellbutton_password {
      width: 40px;
      height: 30px;
      cursor: pointer;
      display: table-cell;
      background-size: 16px 16px;
      background-repeat: no-repeat;
      background-position: center center;
	  text-align:center;
	  vertical-align:middle;
      background-image: url("");
    }
    
    #moreDiv {
      padding-bottom: 30px;
      display: none;
    }
    
    #moreDiv .row {
      width: 100%;
      display: block;
      line-height: 30px;
      padding-left: 26px;
      cursor: pointer;
    }
    
    #moreDiv .row:hover {
      background-color: #F0F0F0;
    }
    
    i {
      color: red;
      font-style: normal;
    }
    
    .empty {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 246px;
    }
  </style>
</head>

<body>
  <div id="contentdiv">
    <div id="headerdiv" style="height:30px;line-height:30px;">
      <input id="search" placeholder="搜索..." style="display:none;"></input>
	  <span id="buttonadd" action='buttonadd' style="border:1px solid #000;padding:2px;cursor:pointer;font-weight:bold;">&nbsp;+&nbsp;</span>
    </div>
    <div id="headerback">
      <div id="backLabel">返回</div>
      <div id="groupLabel"></div>
    </div>
    <div id="popupcontainer">
    </div>
    <div id="moreDiv">
      <div class="row" action='edit'>
        <td action='edit'>编辑</td>
      </div>
      <div class="row" action='autocomplete' style="display:none;">
        <td action='autocomplete'>自动填写</td>
      </div>
      <div class="row" action='copyusername'>
        <td action='copyusername'>复制用户名</td>
      </div>
      <div class="row" action='copypassword'>
        <td action='copypassword'>复制密码</td>
      </div>
      <div class="row" action='copyurl' style="display:none;">
        <td action='copyurl'>复制网址</td>
      </div>
      <div class="row" action='closemore'  style="display:none;">
        <td action="closemore">返回</td>
      </div>
    </div>

  </div>

</body>
<script src="./js/chinese.js" charset="utf-8"></script>
<script src="./js/popup.js" charset="utf-8"></script>

</html>